<template>
    <div>
        <div class="account">
            <div class="accounthead">
                <img src="../assets/asawhole.png" alt="">
                <span>账号整体情况</span>
            </div>
            <div class="accountbody">
                <div class="accountbodyleft">
                   <div class="accountbodyle" @click="searchFeature">
                        <div class="accountbodyleftT">{{ongoingnum}}</div>
                        <div class="accountbodyleftB">进行中的任务（个）</div>
                   </div>
                </div>

                
                <div class="accountbodyright">
                    <div class="accountbodyri"  @click="achieveFeature">
                        <div class="accountbodyrightT">{{hasbeennum}}</div>
                        <div class="accountbodyrightB">已完成的任务（个）</div>
                    </div>
                </div>
                
                
            </div>
            <!-- ckj 最近进行的任务 {{item.companyName}} {{item.module.name}}  {{item.template.updateTime}} {{state}}  -->
            <div class="recently">
                <div class="accounthead">
                    <img src="../assets/recently.png" alt="">
                    <span>最近进行的任务</span>
                    <div class="newBtn" @click="tonewFeature">+ 新建任务</div>
                </div>
                <div class="accountbody" v-for="(item, index) in recently" :key="index" @click="toDetail(item.id)">
                    <el-row>
                        <el-col :span="6"><div class="grid-content bg-purple"></div>{{item.companyName}}</el-col>
                        <el-col :span="6"><div class="grid-content bg-purple-light">{{item.module.name}}</div></el-col>
                        <el-col :span="6"><div class="grid-content bg-purple">{{item.insertTime}}</div></el-col>
                        <el-col :span="6"><div class="grid-content bg-purple-light state">{{item.state | rowstate}}<span>＞</span></div></el-col>
                    </el-row>
                </div>
                
            </div>

            <!-- ckj 已完成任务 -->
            <div class="hasbeen">
                <div class="accounthead">
                    <img src="../assets/finish.png" alt="">
                    <span>已完成任务</span>
                </div>
                    <!-- {{item.insertTime}}  {{item.companyName}} -->
                 <div class="accountbody" v-for="(item, index) in hasbeen" :key="index" @click="toDetail(item.id)">
                    <el-row>
                        <el-col :span="6"><div class="grid-content bg-purple updateTime">{{item.endTime | rowinsertTime}}</div></el-col>
                        <el-col :span="12">
                            <div class="grid-content bg-purple-light">
                                <div>{{item.companyName}}</div>
                                <div class="five">{{item.module.name}}</div>
                            </div>
                        </el-col>
                        <el-col :span="6"><div class="grid-content bg-purple-light record">{{item.total}}条记录<span>＞</span></div></el-col>
                    </el-row>
                </div>

            </div>


        </div>
    </div>
</template>

<script>
import { getGoaheadTask, getFinishTask,getRecentTask } from '@/api'
export default {
    created () {
            this.initHome()
        },
    data () {
        return {
            ongoingnum: 0, // 进行中任务个数
            hasbeennum: 0,  // 已完成的任务个数
            recently: [],  // 最近完成任务
            hasbeen: []
        }
    },
    filters: {
        rowstate(state) {
            if(state === 1 ) {
                return '已提交,等待爬取'
            } else if(state === 2 ) {
                return '爬取中'
            } else if(state === 3) {
                return '已爬取,正在处理结果'
            } else if(state === 4) {
                return '已完成'
            }else if(state === 5) {
                return '已完成'
            }   else {
                return '批量创建的任务提交失败'
            }
        },
        rowinsertTime(endTime)   {
            // console.log(insertTime)
            var now = new Date(endTime)

            var year = now.getFullYear() 
            var month = now.getMonth() + 1// 月
            var day = now.getDate()// 日
              if (month < 10) {
                    month = '0' + month
                }
                if (day < 10) {
                    day = '0' + day
                }
            return year+'/'+month+'/'+day
        }  
    },
    methods: {
        toDetail(id) {
            this.$router.push({path: '/taskdetail', query: {id: id}})
        },
        searchFeature () {
            this.$router.push({path: '/searchFeature'})
        },
        achieveFeature () {
            this.$router.push({path: '/achieveFeature'})
        },
        tonewFeature() {
            this.$router.push({path: '/newFeature'})
        },
        initHome () {
            // ckj 获取进行中的任务
            getGoaheadTask()
            .then(res => {
                // console.log(res)
                this.ongoingnum = Number(res.data.length)
            })
            var obj = {
                pageNum: 1,
                pageSize: 5
            }
            // ckj 获取已完成用户列表
            getFinishTask(obj)
            .then(res => {
                console.log(res)
                this.hasbeennum = res.data.total
                // console.log( this.hasbeennum)
                this.hasbeen = res.data.list
                // console.log(this.hasbeen)
            })
            // ckj 获取最近的任务
            getRecentTask()
            .then(res => {
                if(res.statusCode == 200) {
                    //  console.log(res)
                    this.recently.push(res.data)
                    // console.log(this.recently)
                }
               
            })
        }
    }
}
</script>

<style lang="scss" scoped>
    .newBtn {
        display: inline;
        float: right;
        border:1px solid rgba(64,131,231,1);
        border-radius:8px;
        width: 109px;
        height: 30px;
        line-height: 30px;
        margin-right: 44px;
        text-align: center;
        margin-top: 20px;
        font-size: 16px;
        color: #4083E7;
        cursor: pointer;
    }
    .account {
        width: 100%;
        height:330px;
        background:rgba(255,255,255,.7);
        box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.11);
    }
    .accounthead {
            position: relative;
            text-align: left;
            width: 100%;
            height: 86px;
            font-size: 18px;
            line-height: 86px;
            // border-bottom: 1px solid #ccc;
            img {
                margin-left: 20px;
            }
            span {
                position: absolute;
                bottom: 4px;
                left: 60px;
                // margin-bottom: 10px;
                // margin-left: 19px;
            }
    }
    .accountbody {
        height: 244px;
        display: flex;
        cursor: pointer;
    .accountbodyleft {
        width: 50%;
        height: 100%;
        position: relative;
        .accountbodyle{
            position: absolute;
            left: 50%;
            width: 498px;
            color: #fff;
            transform: translateX(-50%);
            .accountbodyleftT {
                font-size: 100px;
                line-height: 164px;
                height:164px;
                background:rgba(129,199,132,1);
                border-radius:8px 8px 0px 0px;
            }
            .accountbodyleftB {
                //  color: 20px20px;
                line-height: 42px;
                height:42px;
                line-height: 42px;
                background:rgba(102,168,105,1);
                border-radius:0px 0px 8px 8px;
            }
        }
    }

    .accountbodyright {
        width: 50%;
        height: 100%;
        position: relative;
        .accountbodyri{
            position: absolute;
            left: 50%;
            width: 498px;
            color: #fff;
            transform: translateX(-50%);
            .accountbodyrightT {
                font-size: 100px;
                line-height: 164px;
                height:164px;
                background:rgba(255,183,77,1);
                border-radius:8px 8px 0px 0px;
            }
            .accountbodyrightB {
                color: 20px;
                line-height: 42px;
                height:42px;
                line-height: 42px;
                background:rgba(225,165,76,1);
                border-radius:0px 0px 8px 8px;
            }
        }
    }
    
}
.el-row {
    width: 100%;
}
.recently {
    margin-top: 20px;
    width: 100%;
    background: rgba(255,255,255,1);
    box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.11);
    .accountbody {
        height: 74px;
        width: 100%;
        color: #5D5D5D;
        line-height: 1;

    }
}
.state {
        text-align: right;
            span {
                margin-right: 50px;
                margin-left: 41px;
                color: #5D5D5D;
            }
    }

.hasbeen {
    margin-top: 20px;
    width: 100%;
    background:rgba(255,255,255,1);
    box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.11);
    .el-row {
    width: 100%;
    text-align: left;
    }
    .accountbody {
        height: 74px;
        width: 100%;
        color: #5D5D5D;
        line-height: 1;
        .updateTime {
            color: #CD8317;
            margin-left: 41px;
        }
        .five {
            margin-top: 10px;
            color: #5D5D5D;
        }
        .record {
            text-align: right;
            span {
                margin-right: 50px;
                margin-left: 41px;
                color: #5D5D5D;
            }
        }
    }
}


</style>

